import React, { Component } from 'react';
import PropTypes from "prop-types";

import Item from "../Item/index.jsx";
import "./index.css";

export default class List extends Component {
	// 对接收的props数据类型进行限制
	static propTypes={
		todos:PropTypes.array.isRequired,
		changeTodo:PropTypes.func.isRequired,
		deleteTodo:PropTypes.func.isRequired
	}

	render() {
		// console.log(this.props);
		const {todos,changeTodo,deleteTodo} = this.props;
		return (
			<ul className="todo-main">
				{
					todos.map((todo)=>{
						return <Item key={todo.id} {...todo} changeTodo={changeTodo} 
							deleteTodo={deleteTodo}
						></Item>
					})
				}
			</ul>
		)
	}
}
